<template>
  <MyVanskeletonVue :loading="loading">
    <template v-slot:my-content>
      <div>
        <NavBarVue :title="title" />
        <div class="content-top">
          <!-- 企业信息 -->
          <div class="job-fair-section firm">
            <p class="info">
              <b>{{ companyInfo.companyname }}</b>
              <span>{{ companyInfo.hy }}</span>
              <span>{{ companyInfo.address }}</span>
            </p>
            <p class="about">
              <span :class="{ omit: show_content_all === false }">{{
                companyInfo.content
              }}</span>
              <span @click="show_content_all = !show_content_all">{{
                show_content_all === false ? "全部" : "收起"
              }}</span>
              <!-- 点击“全部”，字变“收起”，上面“omit”样式名去掉展开文字 -->
            </p>
          </div>

          <!-- 职位信息 -->
          <div class="job-fair-section jobs">
            <div class="item" v-for="(item, index) in joblist2" :key="index">
              <div class="info">
                <p>
                  <b>{{ item.jobname }}</b>
                  <span @click="apply(item.jobid)">投递简历</span>
                </p>
                <p>
                  <span>{{ item.monthpay }}</span>
                </p>
                <p>
                  <span>{{ item.address }}</span>
                  <span>{{
                    item.workyears === "不限" ? "经验不限" : item.workyears
                  }}</span>
                  <span>{{ item.edu }}</span>
                  <span>{{ item.zy }}</span>
                  <span>招{{ item.InviteNum }}人</span>
                </p>
              </div>
              <div class="about">
                <span :class="{ omit: item.showContent === false }">{{
                  item.content
                }}</span>
                <span
                  v-if="item.showContent === false"
                  @click="showContentAll(item, index)"
                  >查看全部</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </MyVanskeletonVue>
</template>

<script>
import NavBarVue from "@/components/NavBar.vue";
import { Toast, Dialog } from "vant";
import { GetXCZPHCompanyInfo, XCZPHApplyJob } from "@/util/http";
import { checkPersonLogin } from "@/util/session";
import MyVanskeletonVue from "@/components/MyVanskeleton.vue";
import { mixin_person_tologin } from "@/mixin/mixins";
export default {
  name: "CompanyInfo",
  components: {
    NavBarVue,
    MyVanskeletonVue,
  },
  props: ["xczphid", "companyid", "joblist"],
  mixins: [mixin_person_tologin],
  // 定义属性
  data() {
    return {
      title: "",
      loading: true,
      companyInfo: {},
      joblist2: [],
      show_content_all: false,
    };
  },
  mounted() {
    this.joblist2 = this.joblist;
    this.joblist2.forEach((item) => {
      item.showContent = true;
      if (item.content.length >= 50) {
        item.showContent = false;
      }
    });
    this.getInfo();
  },
  // 方法集合
  methods: {
    getInfo() {
      GetXCZPHCompanyInfo(this.companyid).then((res) => {
        // console.log(res);
        this.loading = false;
        this.companyInfo = res;
        this.title = res.companyname;
      });
    },
    //查看全部
    showContentAll(item, index) {
      item.showContent = true;
      this.joblist2.splice(index, 1, item);
    },
    apply(jobid) {
      if (!checkPersonLogin()) {
        this.onToLogin();
        return;
      }
      Dialog.confirm({
        message: "确认投递该职位？",
        confirmButtonText: "投递",
      })
        .then(() => {
          XCZPHApplyJob(this.xczphid, this.companyid, jobid).then((res) => {
            Toast(res.msg);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/dialog/index.less";
@import "@/assets/css/common.less";

/* 通用 */
.job-fair-section {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.job-fair-section + .job-fair-section {
  margin-top: 10px;
}

.job-fair-section .about {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 6px 10px;
  border-radius: 5px;
  margin-top: 10px;
  background-color: #f6f6f6;
}

.job-fair-section .about::before {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.job-fair-section .about span:nth-child(1) {
  display: -webkit-box;
  margin: 2px 0;
  font-size: 13px;
  color: #888;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.job-fair-section .about span:nth-child(1).omit {
  -webkit-line-clamp: 2;
}

.job-fair-section .about span:nth-child(2) {
  font-size: 13px;
  font-weight: 500;
  color: #457ccf;
}

.job-fair-section.firm {
  padding: 15px;
}

.job-fair-section.firm .info {
  display: flex;
  flex-direction: column;
}

.job-fair-section.firm .info b {
  font-size: 20px;
  color: #333;
}

.job-fair-section.firm .info span {
  display: flex;
  font-size: 13px;
  color: #888;
}

.job-fair-section.firm .info span::before {
  display: flex;
  flex: 0 0 40px;
}

.job-fair-section.firm .info span:nth-child(2) {
  margin-top: 8px;
}

.job-fair-section.firm .info span:nth-child(2)::before {
  content: "行业：";
}

.job-fair-section.firm .info span:nth-child(3) {
  margin-top: 2px;
}

.job-fair-section.firm .info span:nth-child(3)::before {
  content: "地址：";
}

.job-fair-section.firm .about::before {
  content: "公司简介";
}

.job-fair-section.jobs::before {
  content: "职位";
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 15px;
  border-bottom: 1px solid #f6f6f6;
  font-size: 16px;
  color: #888;
}

.job-fair-section.jobs .item {
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.job-fair-section.jobs .info {
  display: flex;
  flex-direction: column;
}

.job-fair-section.jobs .info p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.job-fair-section.jobs .info p + p {
  margin-top: 6px;
}

.job-fair-section.jobs .info p:nth-child(1) b {
  display: flex;
  flex: 1;
  font-size: 17px;
  color: #333;
}

.job-fair-section.jobs .info p:nth-child(1) span {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 64px;
  padding: 3px 0;
  border-radius: 3px;
  margin-left: 40px;
  background-color: #457ccf;
  font-size: 13px;
  color: #fff;
}

.job-fair-section.jobs .info p:nth-child(2) span {
  font-size: 16px;
  font-weight: 500;
  color: #f37066;
}

.job-fair-section.jobs .info p:nth-child(2) span::before {
  content: "薪资：";
}

.job-fair-section.jobs .info p:nth-child(3) span {
  display: flex;
  padding: 3px 5px;
  border: 1px solid #f2f2f2;
  border-radius: 3px;
  margin: 2px 6px 6px 0;
  font-size: 12px;
  color: #333;
}

.job-fair-section.jobs .about::before {
  content: "岗位要求";
}

.job-fair-section.jobs .about::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 20px;
  border-bottom: 5px solid #f6f6f6;
  border-left: 5px solid #fff;
  border-right: 5px solid #fff;
}
</style>